//获取元素
var slideShow = document.getElementById("slideshow");
var imgList = document.getElementById("imglist");
var imgs = imgList.children;
var dotList = document.getElementById("dotlist");
var dots = dotList.children;
var pre = document.getElementById("pre");
var next = document.getElementById("next");
var duration = 2000;
var Index = 0;
var count = imgList.children.length;
var timer;

/*------------------------------------------------*/
let bar01 = document.getElementById("bar01");
let bar02 = document.getElementById("bar02");
let dot01 = document.getElementById("dot01");
let dot02 = document.getElementById("dot02");

let m = 0;
let n = 0;

window.onload = function () {
  imgList.children[0].classList.add("appear");
  dotList.children[0].classList.add("appear");

  for (var i = 0; i < dots.length; i++) {
    dots[i].index = i;
    dots[i].onclick = changeMe;
  }
  timer = setInterval(rotate, duration);
  pre.onclick = preImg;
  next.onclick = nextImg;

    timer = setInterval(() => {
      m += 3;
      // 给宽进行递增
      dot01.style.width = m + "px";
      // 给百分比递增
      if (m >= 230) {
        m = 0;
        console.log("sssssssssssssssa");
      }
    }, 100);
  
};

function change() {
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove("appear");
    imgs[i].classList.remove("appear");
  }
  dots[Index].classList.add("appear");
  imgs[Index].classList.add("appear");
}

//循环切换图片
function rotate() {
  Index++;
  if (Index == count) {
    Index = 0;
  }
  change();
}

function preImg() {
  Index--;
  if (Index < 0) {
    Index = count - 1;
  }
  change();
}

function nextImg() {
  Index++;
  if (Index == count) {
    Index = 0;
  }
  change();
}

function changeMe() {
  Index = this.index;
  change();
}

/*----------------------------------------------*/
bar01.addEventListener("click", function (e) {
  //获得鼠标的位置
  var b = e.pageX;
  //获得div的距离
  var c = bar01.offsetLeft + 966;
  //计算鼠标的坐标
  var x = b - c;
  m = x;
  dot01.style.width = m + "px";
});
